﻿@{
    ViewData["Title"] = "Home Page";
}

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="~/images/banner1.svg" alt="ASP.NET" class="img-responsive" />
            <div class="carousel-caption" role="option">
                <p>
                    Learn how to build ASP.NET apps that can run anywhere.
                    <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409">
                        Learn More
                    </a>
                </p>
            </div>
        </div>
        <div class="item">
            <img src="~/images/banner2.svg" alt="Visual Studio" class="img-responsive" />
            <div class="carousel-caption" role="option">
                <p>
                    There are powerful new features in Visual Studio for building modern web apps.
                    <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409">
                        Learn More
                    </a>
                </p>
            </div>
        </div>
        <div class="item">
            <img src="~/images/banner3.svg" alt="Microsoft Azure" class="img-responsive" />
            <div class="carousel-caption" role="option">
                <p>
                    Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.
                    <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
                        Learn More
                    </a>
                </p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="row">
    <div class="col-md-3">
        <h2>Application uses</h2>
        <ul>
            <li>Sample pages using ASP.NET Core MVC</li>
            <li>Theming using <a href="https://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></li>
        </ul>
    </div>
    <div class="col-md-3">
        <h2>How to</h2>
        <ul>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=398600">Add a Controller and View</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=699315">Manage User Secrets using Secret Manager.</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=699316">Use logging to log a message.</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=699317">Add packages using NuGet.</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=699319">Target development, staging or production environment.</a></li>
        </ul>
    </div>
    <div class="col-md-3">
        <h2>Overview</h2>
        <ul>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=518008">Conceptual overview of what is ASP.NET Core</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=699320">Fundamentals of ASP.NET Core such as Startup and middleware.</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=398602">Working with Data</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkId=398603">Security</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=699321">Client side development</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=699322">Develop on different platforms</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=699323">Read more on the documentation site</a></li>
        </ul>
    </div>
    <div class="col-md-3">
        <h2>Run &amp; Deploy</h2>
        <ul>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=517853">Run tools such as EF migrations and more</a></li>
            <li><a href="https://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure Web Apps</a></li>
        </ul>
    </div>
</div>
@*<input type="text" id="txtInput" data-bind="value:message" />
    <b data-bind="text:message"></b>
    <button type="button" class="btn btn-primary" id="btnSend">Send</button>
    <button type="button" class="btn btn-success" id="btnSendFromBack">SendFromBack</button>*@

<!--<select id="sel" data-bind="options:userNames,optionsText:'text',optionsValue:'value',selectedOptions:userName"></select>
<b data-bind="text:userName"></b>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>$index</th>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:users">
        <tr>
            <td data-bind="html:$index()+1"></td>
            <td data-bind="html:$data.id"></td>
            <td data-bind="html:$data.name=='gainorloss'?name+'<strong class=text-success>(自己)</strong>':name"></td>
            <td data-bind="html:$data.age"></td>
        </tr>
    </tbody>
</table>
<a href="javascript:;" data-bind="click:createUser">Create a user</a>

<input type="text" data-bind="value:$data.year" />
<input type="text" data-bind="value:$data.month" />
<input type="text" data-bind="value:$data.day" />
<b data-bind="html:$data.year()+'-'+month()+'-'+day()"></b>
<strong data-bind="html:date"></strong>
<input type="text" name="name" data-bind="value:date" value="" />
<div class="row">
    <strong data-bind="html:count,visible:isVisible,style:{color:indexColor}"></strong>
    <button type="button" class="btn btn-primary" data-bind="event:{click:addCount,mouseover:addBtnMouseOver,mouseout:addBtnMouseOut}">+</button>
</div>
<div data-bind="component:{name:'messageSenderControl',params:'jesse'}"></div>
<div data-bind="component:'messageSenderControl'"></div>-->
@*<form data-bind="submit:submitForm">
        <div><label>用户名</label><input type="text" name="name" value="" data-bind="value:name" /></div>
        <div><label>邮箱</label><input type="text" name="email" value="" data-bind="value:email" /></div>
        <div>
            <label>地址</label>
            <select name="city" data-bind="options:cities,optionsValue:'code',optionsText:'name',value:city,optionsCaption:'请选择城市'"></select>
            <select name="area" data-bind="options:currentAreas,optionsValue:'code',optionsText:'name',optionsCaption:'请选择区县'"></select>
        </div>
        <div>
            <label>爱好</label>
            <select multiple="multiple" data-bind="options:hobbies,selectedOptions:myHobbies"></select>
            <strong data-bind="text:myHobbies"></strong>
        </div>
        <div><input type="submit" name="name" value="提交" /></div>
    </form>
    <strong class="error" data-bind="validationMessage:name"></strong>
    <strong class="error" data-bind="validationMessage:email"></strong>

    <div class="row">
        请选择<strong>选择</strong>
    </div>
    <div class="row" data-model="content02">
        <select data-bind="options:banks"></select>
    </div>*@

@*<div class="page">
        <div class="header">
            <h1 data-bind="text:pageTitle"></h1>
        </div>
        <hr />
        <div id="main">
            <table class="table ">
                <thead>
                    <tr>
                        <th>商品</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:cartItems">
                    <tr>
                        <td>
                            <select data-bind="options:$parent.products,optionsText:'title',value:product"></select>
                        </td>
                        <td><span data-bind="text:formatCurrency(product().salePrice())"></span></td>
                        <td><input type="number" name="name" value="" data-bind="value:quantity,valueUpdate:'afterkeydown'" /></td>
                        <td><span data-bind="text:formatCurrency(subtotal())" class="text-danger"></span></td>
                        <td><button type="button" class="btn btn-danger" data-bind="click:$parent.removeItem.bind($data)">Del</button></td>
                    </tr>
                </tbody>
            </table>

        </div>
        <hr />
        <div class="footer">
            <p>
                <span data-bind="visible:cartItems().length>0">当前购物车商品总条数<strong data-bind="text:cartItems().length" class="text-primary"></strong></span>
            </p>
            <p>总计<strong data-bind="text:formatCurrency(total())" class="text-danger"></strong></p>
            <p>
                <button type="button" class="btn btn-success" data-bind="click:addItem">Add</button>
            </p>
        </div>
    </div>*@
<div class="page">
    <div class="header">
        <h1 data-bind="text:pageTitle"></h1>
    </div>
    <div id="main">
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>Html/Text</th>
                    <th>Checkbox</th>
                    <th>Radio</th>
                    <th>DropDownList</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <p data-bind="text:html"></p>
                        <p data-bind="html:html"></p>
                    </td>
                    <td>
                        <input type="checkbox" name="name" value="" data-bind="checked:isChecked" /><label>选择</label>
                        <span data-bind="text:isChecked"></span>
                    </td>
                    <td>
                        <div data-bind="foreach:colors">
                            <input type="radio"  data-bind="value:key,checked:$parent.selectedColor" name="color"/><span data-bind="text:value"></span>
                        </div>
                    </td>
                    <td>
                        @*<select data-bind="options:colors,optionsText:'value',optionsValue:'key',value:selectedColor,selectedOptions:selectedColors" multiple="multiple"></select>*@
                        <p data-bind="text:selectedColor"></p>
                        @*<p data-bind="text:selectedColors"></p>*@
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    .error {
        color: red;
    }
</style>
@section scripts{
    <script src="~/lib/knockout-latest.js"></script>
    <script src="~/lib/knockout.validation.min.js"></script>
    @*<script src="~/lib/jQueryLiveQuery-min.js"></script>*@
    @*<script src="~/lib/jquery.livequery.min.js"></script>*@
    @*<script src="~/lib/knockout.multimodels-0.1.min.js"></script>*@
    <script src="~/lib/signalr.min.js"></script>
    <script>
        //var Vm01 = function (name) {
        //    var self = this;
        //    self.name = ko.observable(name);
        //    self.selectedBank = ko.observable("");
        //    self.selectBank = function () {

        //    };
        //};


        //var Vm02 = function (name) {
        //    var self = this;
        //    self.name = ko.observable(name);
        //    self.selectedBank = ko.observable("");
        //    self.banks = ko.observableArray(["农业银行", "工商银行", "建设银行"]);
        //    self.isVisible = ko.observable(false);
        //    self.init = function (message) {
        //        self.selectedBank = message;
        //    }
        //};
        //var formatCurrency = function (currency) {
        //     return '￥' + currency.toFixed(2);
        // }
        // var Product = function () {
        //     var self = this;
        //     self.id = ko.observable();
        //     self.title = ko.observable();
        //     self.salePrice = ko.observable();
        //     self.desc = ko.observable();
        // };
        // var CartItem = function () {
        //     var self = this;
        //     self.product = ko.observable();
        //     self.quantity = ko.observable(1);
        //     self.subtotal = ko.computed(function () {
        //         return !self.product() ? 0 : self.product().salePrice() * parseInt(self.quantity());
        //     });
        // };
        // var Vm = function () {
        //     var self = this;
        //     self.pageTitle = ko.observable('Knockout.js computed sample.');
        //     self.cartItems = ko.observableArray([new CartItem()]);
        //     self.products = ko.observableArray([new Product().title('男装 摇粒绒拉链茄克(长袖) 408993 优衣库UNIQLO').desc('1').salePrice(149.00),
        //         new Product().title('男装 华夫格圆领针织衫(长袖) 409186 优衣库UNIQLO').desc('1').salePrice(150.00)]);
        //     self.total = ko.computed(function () {
        //         var total = 0;
        //         $.each(self.cartItems(), function (i, e) {
        //             total += e.subtotal();
        //         })
        //         return total;
        //     });
        //     self.addItem = function () {
        //         self.cartItems.push(new CartItem());
        //     };
        //     self.removeItem = function (item) {
        //         self.cartItems.remove(item);
        //     }
        // };
        // $(function () {
        //     //var vm01 = new Vm01("gain");
        //     //ko.attach("content01", vm01);
        //     //var vm02 = new Vm02("gainorloss");
        //     //ko.attach("content02", vm02);


        //     //var _users = [{ id: 1, name: 'gainorloss', age: 25 },
        //     //{ id: 2, name: 'gain', age: 25 },
        //     //{ id: 3, name: "loss", age: 25 }];
        //     //var _cities = [{ name: '北京市', code: '10001' }, { name: '上海市', code: '10002' }];
        //     //var _areas = [{ name: '朝阳区', code: '100010001', cityCode: '10001' }, { name: '东城区', code: '100010002', cityCode: '10001' },
        //     //{ name: '静安区', code: '100020001', cityCode: '10002' }, { name: '随意区', code: '100020002', cityCode: '10002' }];
        //     //var _hobbies = ["ktv", "电影", "撩妹"];

        //     //var Vm = function () {
        //     //    var self = this;
        //     //    self.message = ko.observable("");
        //     //    //self.userNames = ko.observableArray([{ text: "Java", value: 1 }, { text: ".Net", value: 2 }, { text: "C++", value: 3 }, { text: "Python", value: 4 }]);
        //     //    //self.userName = ko.observable("");
        //     //    //self.users = ko.observableArray(_users);
        //     //    //self.createUser = function () {
        //     //    //    self.users.push({ id: 4, name: "loss", age: 25 });
        //     //    //};
        //     //    //self.year = ko.observable("2018");
        //     //    //self.month = ko.observable("10");
        //     //    //self.day = ko.observable("20");
        //     //    ////self.date = ko.computed(function () {
        //     //    ////    return self.year() + '年' + self.month() + '月' + self.day()+'日';
        //     //    ////}, self);
        //     //    //self.date = ko.pureComputed({
        //     //    //    read: function () {
        //     //    //        return self.year() + '年' + self.month() + '月' + self.day() + '日';
        //     //    //    },
        //     //    //    write: function (val) {
        //     //    //        var indexOfYear = val.indexOf("年");
        //     //    //        var indexOfMonth = val.indexOf("月");
        //     //    //        var indexOfDay = val.indexOf("日");

        //     //    //        var year = val.substring(0, indexOfYear);
        //     //    //        var month = val.substring(indexOfYear + 1, indexOfMonth);
        //     //    //        var day = val.substring(indexOfMonth + 1, indexOfDay);

        //     //    //        if (!/^\d{4}$/.test(year)) {
        //     //    //            alert("请输入四位阿拉伯数字的年份！");
        //     //    //            return false;
        //     //    //        }
        //     //    //        self.year(year);
        //     //    //        if (!/^{0-2}{0-9}$/.test(month)) {
        //     //    //            alert("请输入四位阿拉伯数字的年份！");
        //     //    //            return false;
        //     //    //        }
        //     //    //        self.month(month);
        //     //    //        if (!/^{0-4}{0-9}$/.test(day)) {
        //     //    //            alert("请输入四位阿拉伯数字的年份！");
        //     //    //            return false;
        //     //    //        }
        //     //    //        self.day(day);
        //     //    //    },
        //     //    //    owner: self
        //     //    //});

        //     //    //self.count = ko.observable(0);
        //     //    //self.isVisible = ko.computed(function () {
        //     //    //    return self.count() < 20;
        //     //    //}, self);
        //     //    //self.addCount = function () {
        //     //    //    var _count = self.count();
        //     //    //    var _count = _count + 1;
        //     //    //    self.count(_count);
        //     //    //};
        //     //    //self.indexColor = ko.observable("black");
        //     //    //self.addBtnMouseOver = function () {
        //     //    //    self.indexColor("red");
        //     //    //};
        //     //    //self.addBtnMouseOut = function () {
        //     //    //    self.indexColor("black");
        //     //    //};
        //     //    //    ko.validation.configure({
        //     //    //    registerExtenders: true,
        //     //    //    insertMessages: true,
        //     //    //    errorClass:'error'
        //     //    //});
        //     //    self.name = ko.observable('').extend({ required: { message: "请输入账号名称" } });
        //     //    self.email = ko.observable('').extend({ required: { message: "请输入邮箱" } });;
        //     //    self.cities = ko.observableArray(_cities);
        //     //    self.city = ko.observable('');
        //     //    self.areas = ko.observableArray(_areas);
        //     //    self.currentAreas = ko.computed(function () {
        //     //        var rt = ko.utils.arrayFilter(self.areas(), function (area) {
        //     //            return area.cityCode == self.city();
        //     //        });
        //     //        return rt;
        //     //    }, self);
        //     //    self.hobbies = ko.observableArray(_hobbies);
        //     //    self.myHobbies = ko.observableArray([]);
        //     //    self.submitForm = function () {
        //     //        if (self.errors().length > 0) {
        //     //            vm.errors.showAllMessages();
        //     //            return false;
        //     //        }
        //     //        alert(1);
        //     //        return true;
        //     //    };
        //     //};
        //     //var vm = new Vm();
        //     //ko.components.register('messageSenderControl', {
        //     //    viewModel: function (params) {
        //     //        var self = this;
        //     //        self.account = ko.observable(params != null ? params : "Alice");
        //     //        self.message = ko.observable("");
        //     //        self.messages = ko.observableArray([]);
        //     //        self.sendMessage = function () {
        //     //            self.messages.push({ name: self.account(), message: self.message() });
        //     //        }
        //     //    },
        //     //    template: '<div class="row"><input type="text" name="name" value="" data-bind="message"/><button type="button" data-bind="click:sendMessage">发送</button><ul data-bind="foreach:messages"><li data-bind="html:name+message"></li></ul></div>',
        //     //});
        //     //vm.errors = ko.validation.group(vm);
        //     //ko.applyBindings(vm);
        // });

        // $(function () {
        //     var vm = new Vm();
        //     ko.applyBindings(vm);
        // });
        //var conn = new signalR.HubConnectionBuilder().withUrl("/testhub").build();
        //conn.start();
        //conn.on("SayHelloAsync", function (user, message) {
        //    var tempStr = user + ":" + message;
        //    document.getElementById("txtInput").value = tempStr;
        //    console.log(tempStr);
        //});
        //document.getElementById("btnSend").onclick = function () {
        //    conn.qs = { name: "Zj" };
        //    conn.invoke("SendMessageAsync", "gainorloss", new Date().getSeconds());
        //};
        //document.getElementById("btnSendFromBack").onclick = function () {
        //    $.get("/Home/SendAsync", { msg: "" }, function () {

        //    });
        //};
    </script>
    <script type="text/javascript">
        var Color = function () {
            var self = this;
            self.key = ko.observable();
            self.value = ko.observable();
        };
        var Vm = function () {
            var self = this;
            self.pageTitle = ko.observable('内置绑定');
            self.html = ko.observable('<h2>Html</h2>');
            self.isChecked = ko.observable(true);
            self.colors = ko.observableArray([new Color().key('Black').value('黑色'),
            new Color().key('Red').value('红色'),
            new Color().key('Green').value('绿色')]);
            self.selectedColor = ko.observable();
            self.selectedColors = ko.observableArray();
        };
        var vm = new Vm();
        ko.applyBindings(vm);
    </script>
}
